import React from "react"
import ReactDOM from "react-dom"
import "antd/dist/antd.css"
//导入antd相关组件
import {Input} from "antd"
import { Modal, Button } from 'antd';

export default class Header extends React.Component{

	constructor(props){
		super(props);
	}

	render(){
		//如果用户登录，则切换到用户中心模块，未登录则切换到登录界面
		return (
			<div>
				<User></User>
			</div>
		);
	}
}

class User extends React.Component {

	constructor(props){
		super(props);
		this.state = {
			visible : false,
			hasLogedin : false,
		}
	}

	//绑定到某个按钮，点击时打开modal框
	showModal(){
		this.setState({
			visible: true,
		});
	};

	handleOk(e){
		this.setState({
			visible: false,
			hasLogedin : true
		});
	};

	handleCancel(e){
		this.setState({
			visible: false,
		});
	};

	render() {
		const login =
			<div>
				<Button type="primary" onClick={this.showModal.bind(this)}>登录</Button>
				<Modal
					title="用户登录"
					visible={this.state.visible}
					onOk={this.handleOk.bind(this)}
					onCancel={this.handleCancel.bind(this)}
					okText="登录"
					cancelText="取消"
				>
					<form id="submit">
						<div>
							<label>name:</label>
							<Input name="name" type="text"/>
						</div>
						<div>
							<label>password:</label>
							<Input name="password" type="password"/>
						</div>
						<div>
							<label>email:</label>
							<Input name="email" type="email"/>
						</div>
					</form>
				</Modal>
			</div>;

		return (
			this.state.hasLogedin ?
				<Button>name</Button>:
				login
		);
	}
}